HTML 起手式


Posted by mijouhsieh on 2023-04-04

設定 viewport 的目的是告訴瀏覽器 viewport 的寬度以什麼為基準,以及這個寬度和 CSS 之間的比例關係。需要在 HTML 的 <head> 裡加入:

<meta name="viewport" content="width=device-width, initial-scale=1">
  • width=device-width 讓網頁內容與裝置螢幕寬度一致。
    • 如果寫 width=320px,那麼當螢幕尺寸改變時,viewport 的寬度仍是 320px,這樣網頁內容就會 被縮放
  • initial-scale=1.0 設定「CSS 像素」和「裝置像素」的比例為 1:1。
  • 編輯器的 Emmet 套件來創建 HTML 文件,這行設定會被自動帶入預設內容。

開始使用 meta viewport 標籤設定網站時,由於不同裝置有不同的螢幕解析度和像素密度,在定義頁面元素的時候應習慣使用「相對寬度」 而不是用「絕對寬度」,這樣可確保元素符合 viewport 大小










Related Posts

從 V8 bytecode 探討 let 與 var 的效能問題

從 V8 bytecode 探討 let 與 var 的效能問題

D32_W3 作業確認 + W4 NET101

D32_W3 作業確認 + W4 NET101

裝 nuxt 遇到的問題

裝 nuxt 遇到的問題


Comments